<script>
import AddImg from "@/components/AddImg.vue";
import { useUserStore } from "@/stores/user";
import { mapStores } from "pinia";
import GoodsApi from "@/api/goods";
import { ElNotification } from "element-plus";
export default {
  components: { AddImg },
  data() {
    return {
      datas: {},
      form: {
        name: "",
        description: "",
        price: null,
        stock: null,
        condition: null,
      },
      rules: {
        name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          { min: 2, max: 30, message: "长度在2到30个字符", trigger: "blur" },
        ],
        price: [
          { required: true, message: "请输入商品价格", trigger: "blur" },
          { type: "number", message: "价格必须为数字", trigger: "blur" },
          { validator: (rule, value, cb) => (value > 0 ? cb() : cb(new Error("价格必须大于0"))) },
        ],
        stock: [
          { required: true, message: "请输入库存数量", trigger: "blur" },
          { type: "number", message: "库存必须为数字", trigger: "blur" },
          { validator: (rule, value, cb) => (value > 0 ? cb() : cb(new Error("库存必须大于0"))) },
        ],
        condition: [{ required: true, message: "请选择商品成色", trigger: "change" }],
      },
      formValid: false,
    };
  },
  computed: {
    ...mapStores(useUserStore),
  },
  methods: {
    async submitForm() {
      const valid = await new Promise((resolve) => {
        this.$refs.goodsForm.validate(resolve);
      });

      if (!valid) {
        console.log("表单验证失败");
        return false;
      }

      this.datas = {
        seller: this.userStore.userId,
        goods_name: this.form.name,
        goods_desc: this.form.description,
        goods_price: this.form.price,
        goods_stock: this.form.stock,
        goods_detail: this.form.condition,
      };
      let api = new GoodsApi();

      let result = await api.addGoods(this.datas);
      console.log(result);
      if (result.data.code === 201) {
        this.$refs.addImg.subImg(result.data.data.goods);
        ElNotification({
          title: "Success",
          message: "上架成功",
          type: "success",
        });
        this.form = {
          name: "",
          description: "",
          price: null,
          stock: null,
          condition: null,
        };
      }
    },
    validateForm() {
      this.$refs.goodsForm.validate((valid) => {
        this.formValid = valid;
      });
    },
  },
  watch: {
    form: {
      handler() {
        this.validateForm();
      },
      deep: true,
    },
  },
};
</script>

<template>
  <div>
    <section class="title">
      <p>上架物品</p>
    </section>
    <AddImg ref="addImg" />
    <div class="goods-form">
      <!-- 添加 ref="goodsForm" -->
      <el-form :model="form" label-width="120px" :rules="rules" ref="goodsForm">
        <!-- 商品名称 -->
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入商品名称"></el-input>
        </el-form-item>

        <!-- 商品描述 -->
        <el-form-item label="商品描述" prop="description">
          <el-input
            type="textarea"
            v-model="form.description"
            placeholder="请输入商品详细信息"
            :rows="4"
          ></el-input>
        </el-form-item>

        <!-- 价格 & 库存 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="商品价格" prop="price">
              <el-input v-model.number="form.price" type="number" placeholder="0.00" step="0.01">
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品库存" prop="stock">
              <el-input
                v-model.number="form.stock"
                type="number"
                placeholder="0"
                min="1"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 商品成色 -->
        <el-form-item label="商品成色" prop="condition">
          <el-select v-model="form.condition" placeholder="请选择成色" style="width: 100%">
            <el-option v-for="n in 9" :key="n" :label="`${10 - n}成新`" :value="10 - n"></el-option>
          </el-select>
        </el-form-item>

        <!-- 提交按钮 -->
        <el-form-item class="button-group">
          <!-- 添加 :disabled="!formValid" -->
          <el-button type="primary" @click="submitForm" :disabled="!formValid">
            立即发布
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style scoped>
/* 标题样式优化 */
.title {
  text-align: center;
  justify-content: center;
  font-size: 25px;
  font-weight: 600;
  color: #753434;
}

.title p::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #753434;
  margin: 10px auto 0;
}

.goods-form {
  max-width: 800px;
  margin: 30px auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-form-item {
  margin-bottom: 22px;
}

:deep(.button-group .el-form-item__content) {
  display: grid;
  place-items: center;
  margin: 24px 20% 0;
}

.el-button {
  width: 200px; /* 可选，设置固定宽度更美观 */
}
</style>
